<template>
  <div>
    <city-header></city-header>
    <cty-sea :cities="cities"></cty-sea>
    <city-yabc :list="cities" @gundong="GO"></city-yabc>
    <city-list :cities="cities" :hot="hotCities" :gitadd="gitadd"></city-list>
  </div>
</template>

<script>
import CityHeader from './city/header.vue'
import CtySea from './city/search.vue'
import CityList from './city/list.vue'
import CityYabc from './city/cityabc.vue'
import axios from 'axios'

export default {
  name: 'city',
  components: {
    CityHeader,
    CtySea,
    CityList,
    CityYabc
  },
  data () {
    return {
      cities: {},
      hotCities: [],
      gitadd: ''
    }
  },
  methods: {
    GO (key) {
      this.gitadd = key
      // console.log(this.gitadd)
    },
    getHome () {
      axios.get('/json/city.json')
        .then((res) => { // res返回数据:默认返回http请求相关信息(外层)，json数据 (res. data)
          this.gets(res)
        })
    },
    gets (res) {
      let dataObj = res.data // 保存json数据
      let datalist = dataObj.data // 保存所有的列表数据
      if (dataObj.ret && datalist) { // 如果后台返回状态为true并且data中有数据才进行数据的操作
        this.hotCities = datalist.hotCities
        this.cities = datalist.cities
      }
    }
  },
  mounted () {
    this.getHome()
  }
}
</script>

<style>
</style>
